@mixin make-container($gutter:$grid-gutter-width) {
   width: 100%;
   padding-right:$gutter / 2 ;
   padding-left: $gutter / 2 ;
   margin-right: auto;
   margin-left: auto;
}
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
   @each  $breakpoint, $container-max-widths in $max-widths {
       @include media-breakpoint-up($breakpoint, $breakpoints){
          max-width: $container-max-widths;
       }
   }
}

@mixin make-row($gutter: $grid-gutter-width) {
    display: flex;
    flex-wrap: wrap;
    margin-right: -$gutter / 2;
    margin-left: -$gutter / 2;  
}

@mixin make-col-ready($gutter:$grid-gutter-width) {
  position: relative;
  width:100%;
  padding-right : $gutter / 2;
  padding-left: $gutter / 2; 
}
@mixin make-col($size,$columns:$grid-columns) {
    flex: 0 0 percentage($size / $columns);
    max-width: percentage($size / $columns);
}

@mixin make-col-offset($size,$columns:$grid-columns) {
  $num: $size / $columns;
  margin-left: if($num == 0 , 0 , percentage($num));
}